{%extends "base.html"%}

{%block title%}
查看讨论
{%endblock%}
{%block head%}
<style>
</style>
{%endblock%}
{%block body%}
<script>
    var discussion, post;
    $(document).ready(() => {
        discussion = new Vue({
            el: "#discussion",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                done: false,
                data: null,
                path_name: "",
                current_page: 0,
                page_count: 0,
                path: "", editing: false
            },
            methods: {
                removeDiscussion(id) {
                    axios.post("/api/discussion/remove", { discussionID: id }).then(ctx => {
                        ctx = ctx.data;
                        // ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            showErrorModal(ctx.message);
                            return;
                        }
                        window.location.reload();
                    });
                },
                editDiscussion(id) {
                    axios.post("/api/get_discussion", { id: id }).then(ctx => {
                        ctx = ctx.data;
                        // ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            showErrorModal(ctx.message);
                            return;
                        }
                        post.text = ctx.data.content;
                        post.title = ctx.data.title;
                        post.top = ctx.data.top;
                        post.editing = id;
                        $("html,body").animate({
                            scrollTop: 9999
                        });

                    });
                },
            },
            computed: {
                page_menu() {
                    const arr = new Array();
                    for (var i = 1; i <= this.page_count; i++) arr.push(i);
                    // console.log(problems);
                    // console.log(arr);
                    if (arr.indexOf(this.current_page) > 5) {
                        arr.splice(1, arr.indexOf(this.current_page) - 4);
                        arr.splice(1, 1, -1);
                    }
                    if (arr.indexOf(this.current_page) + 5 <= arr.length) {
                        arr.splice(arr.indexOf(this.current_page) + 5, arr.length - 2 - (arr.indexOf(this.current_page) + 5) + 1);
                        arr.splice(-2, 1, -1);
                    }
                    return arr;
                }
            }
        });
        const urlarr = window.location.href.split("/").reverse();
        discussion.path = urlarr[1];
        axios.post("/api/get_discussion_list", { page: urlarr[0], path: urlarr[1] }).then(ctx => {
            ctx = ctx.data;
            // ctx = JSON.parse(ctx);
            if (ctx.code) {
                show_modal_error(ctx.message);
                return;
            }
            discussion.data = ctx.data;
            discussion.page_count = ctx.page_count;
            discussion.current_page = ctx.current_page;
            discussion.managable = ctx.managable;
            axios.post("/api/get_path_name", { path: urlarr[1] }).then(ctx => {

                discussion.path_name = ctx.data.name;
                discussion.done = true;
            });
        });
        post = new Vue({
            data: {
                text: "", error_message: "", success_message: "", sending: false, title: "", top: false, editing: false
            },
            el: "#post",
            delimiters: ['{[', ']}'],
            computed: {
                preview_content() {
                    return converter.makeHtml(this.text);
                }
            }, methods: {
                update() {
                    this.sending = true, this.error_message = "";
                    this.success_message = "";
                    axios.post("/api/discussion/update", { id: this.editing, title: this.title, top: this.top, content: this.text }).then(ctx => {
                        ctx = ctx.data;
                        // ctx = JSON.parse(ctx);
                        this.sending = false;
                        if (ctx.code) {
                            showErrorModal(ctx.message);

                            return;
                        }
                        this.success_message = "更新完成."

                    });
                },
                send() {
                    const comp = this;
                    this.sending = true, this.error_message = "";
                    axios.post("/api/post_discussion", {
                        title: comp.title, content: comp.text, path: discussion.path, top: comp.top
                    }).then(ctx => {
                        ctx = ctx.data;
                        // ctx = JSON.parse(ctx);
                        comp.sending = false;
                        if (ctx.code) {
                            comp.error_message = ctx.message;
                            return;
                        }
                        window.location.reload();
                    });
                }
            }
        });
    });
</script>
<div id="discussion" v-if="done">
    <div class="ui header">
        <h2>{[path_name]}</h2>
    </div>
    <div class="ui segment stacked">

        <table class="ui very basic table">
            <thead>
                <tr>
                    <th class="center aligned">标题</th>
                    <th class="center aligned">发布者</th>
                    <th class="center aligned">时间</th>
                    <th class="center aligned">回复数</th>
                    <th class="center aligned">最新回复</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="data in data">
                    <td class="center aligned" style="width:300px;">
                        <a :href="'/show_discussion/'+data.id" target="_blank">{[data.title]}</a>
                    </td>
                    <td class="center aligned"><a :href="'/profile/'+data.uid" target="_blank">{[data.username]}</a>
                    </td>

                    <td class="center aligned">
                        {[data.time]}
                    </td>
                    <td class="center aligned">
                        {[data.comment_count]}
                    </td>
                    <td class="center aligned">
                        {[data.last_comment_time]}
                    </td>
                    <td>
                        <a v-if="managable||base.uid==data.uid" v-on:click="editDiscussion(data.id)">编辑</a>
                        <a v-if="managable||base.uid==data.uid" v-on:click="removeDiscussion(data.id)">删除</a>
                    </td>
                </tr>

            </tbody>
        </table>
        <div class="ui center aligned container">
            <div class="ui pagination menu" v-if="page_menu.find(x=>x!=-1)">
                <a class="item" v-for="item in page_menu"
                    :class="{disabled:item==-1||item==current_page,active:item==current_page}"
                    :href="(item==-1||item==current_page)?null:('/discussions/'+path+'/'+item)">{[
                    item==-1?"...":item]}</a>
            </div>
        </div>
    </div>
</div>
<div class="ui divider"></div>
<div id="post">
    <div class="ui form" :class="{error:error_message!='',success:success_message!=''}">
        <div class="ui header">
            <h4>发送讨论</h4>
        </div>
        <div class="ui field">
            <label>标题</label>
            <input type="text" v-model="title">
        </div>
        <div class="ui field">
            <label>内容</label>
            <textarea v-model="text"></textarea>
        </div>
        <div class="ui field">
            <div class="ui toggle checkbox">
                <input type="checkbox" v-model='top'>
                <label>置顶</label>
            </div>
        </div>
        <div class="ui error message">
            {[error_message]}
        </div>
        <div class="ui success message">
            {[success_message]}
        </div>
        <div class="ui message">
            支持 Markdown 与 Latex.
        </div>
    </div>
    <div class="ui segment" v-html="preview_content">

    </div>
    <div class="ui green icon button" v-if="!editing" v-on:click="send" v-bind:class="{loading:sending}">
        <i class="send icon"></i>发送
    </div>
    <div class="ui green icon button" v-if="editing" v-on:click="update" v-bind:class="{loading:sending}">
        <i class="send icon"></i>更新
    </div>
</div>
{%endblock%}